<template>
	<view class="content" :style="{ backgroundImage: `url(${site_config.front_background})` }" v-if="site_config">
		<status-bar title=" " hideBg="1" statusHeight backColor :back="back"></status-bar>
		<view class="Box " :style="{ backgroundImage: `url(${site_config.front_background_outer})` }">
			<scroll-view scroll-y="true" class="scrollView " @scroll="Scroll">
				<movable-area class="movable-area" :style="{ height: bgImgHeight + 'rpx' }" :scale-area="true">
					<movable-view class="movable-view" :out-of-bounds="false" direction="all" :scale="true"
						:scale-min="1" :scale-value="scaleValue" :disabled="Disabled" @scale="scaleView">
						<view class="list" v-for="(item, index) in site_location" :key="index"
							:style="{ width: item.width + 'rpx', height: item.height + 'rpx', left: item.x + 'rpx', top: item.y + 'rpx' }"
							@click="selectTab(item)">
							<image :src="$imgUrls(item.choose_log)" class="list_img" v-if="item.select == 1"></image>
							<block v-else>
								<image :src="$imgUrls(item.empty_log)" class="list_img"
									v-if="item.order_state == 0 || item.order_state == 2"></image>
								<image :src="$imgUrls(item.order_log)" class="list_img" v-if="item.order_state == 1">
								</image>
							</block>
						</view>

						<image :src="$imgUrls(site_config.background)" mode="widthFix" class="rows"></image>
					</movable-view>
				</movable-area>
			</scroll-view>

			<view class="box_Tip">
				<view class="type_config" v-for="(item, index) in type_config" :key="item.id">
					<image :src="$imgUrls(item.empty_log)" class="type_config_log"></image>
					<text class="type_config_name">{{ item.type_name }}</text>
				</view>
			</view>
		</view>

		<view class="footer">
			<view class="details">
				<view class="d-flex a-center">
					<text class="details_txt">{{ details.open_date }}</text>
					<text class="open_time details_txt">{{ details.open_time }}</text>
					<text class="details_txt">{{ details.name }}</text>
				</view>
				<view class="d-flex a-center">
					<text class="details_txt">预约妆造 余位：</text>
					<text class="details_txt">{{ details.make_up_num }}/{{ details.make_up_num_total }}</text>
				</view>
			</view>

			<scroll-view scroll-x="true" class="rows nowrap m-top14" v-if="selectArr.length">
				<view class="tableList" v-for="(item, index) in selectArr" :key="index">
					<text class="tableList_name">{{ item.type_name }}-{{ item.name }}</text>
					<view class="black h7 m-top4">￥{{ item.site_price }}</view>
				</view>
			</scroll-view>

			<view class="Givemoney" v-if="selectArr.length">
				<view class="MoneyBox">
					<view class="d-flex a-center">
						<text class="Earnest">定金</text>
						<text class="EarnestMoney">￥{{ priceObj.order_price }}</text>
					</view>
					<view class="d-flex a-center">
						<text class="Copewith">应付金额</text>
						<text class="CopewithMoney">￥{{ priceObj.site_price }}</text>
					</view>
				</view>
				<view class="continum" @click="chooseSite">确认并支付定金</view>
			</view>

			<view class="Make_btn" v-else>请选择座席</view>
		</view>

		<u-modal :show="show" title="温馨提示" :content="site_config.tel_desc" :closeOnClickOverlay="true"
			confirmText="立即联系" confirmColor="#e0bb71" @close="show = false" @confirm="Confirm"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scaleValue: 1,
				details: '',
				id: '',
				type_config: [],
				site_config: '',
				site_location: [],
				selectArr: [],
				Disabled: true,
				priceObj: '',
				show: false
			};
		},
		onLoad(opt) {
			if (opt.id) this.id = opt.id;
			this.getSiteTimeDetail();
		},

		methods: {
			getSiteTimeDetail() {
				this.$showLoading('');
				this.$http
					.get({
						url: '/SiteApi/getSiteTimeDetail',
						data: {
							id: this.id
						}
					})
					.then((res) => {
						this.$hideLoading();
						if (res.code != 200) return this.$Toast(res.msg);
						const Result = res.data;
						this.details = Result;
						this.site_config = Result.site_config;
						Result.site_location.forEach((item) => {
							item.width = Math.round(Number(Result.site_config.width) * 0.72);
							item.height = Math.round(Number(Result.site_config.height) * 0.72);
							item.x = Math.round(Number(item.x) * 0.72);
							item.y = Math.round(Number(item.y) * 0.72);
							let userItem = Result.type_config.find((n) => n.id == item.site_type);
							if (userItem) {
								item.empty_log = userItem.empty_log;
								item.choose_log = userItem.choose_log;
								item.order_log = userItem.order_log;
								item.type_name = userItem.type_name;
							}
						});
						this.site_location = Result.site_location;
						this.type_config = Result.type_config || [];
					});
			},
			selectTab(item) {
				if (this.scaleValue == 1) this.scaleValue = 1.5;
				if (item.order_state == 1) return this.$Toast('该座位已被预约，请重新选择');
				if (item.order_state == 2) return;
				if (item.tel == 1) return (this.show = true);
				const Flag = this.containsObjectWithData(this.selectArr, 'id', item.id);
				const Index = this.site_location.findIndex((n) => n.id == item.id);
				if (Flag) {
					const selectIndex = this.selectArr.findIndex((n) => n.id == item.id);
					this.selectArr.splice(selectIndex, 1);
					this.site_location[Index].select = 0;
				} else {
					this.selectArr.push(item);
					this.site_location[Index].select = 1;
				}
				if (this.selectArr.length) this.getSitePriceInfo();
			},

			getSitePriceInfo() {
				let site_ids = [];
				this.selectArr.forEach((item) => {
					site_ids.push(item.id);
				});
				this.$http
					.get({
						url: '/SiteApi/getSitePriceInfo',
						data: {
							site_id: site_ids.join(','),
							time_id: this.id
						}
					})
					.then((res) => {
						if (res.code != 200) return this.$Toast(res.msg);
						const Result = res.data;
						this.priceObj = Result;
					});
			},

			chooseSite() {
				if (!this.selectArr.length) return;
				this.$showLoading('座位锁定中~');
				let site_ids = [];
				this.selectArr.forEach((item) => {
					site_ids.push(item.id);
				});
				this.$http
					.post({
						url: '/SiteApi/chooseSite',
						data: {
							site_id: site_ids.join(','),
							time_id: this.id
						}
					})
					.then((res) => {
						this.$hideLoading();
						if (res.code != 200) return this.$Toast(res.msg);
						if (res.data) this.toUrl(`orderDetails?order_id=${res.data}`);
					});
			},

			scaleView(e) {
				const scale = e.detail.scale;
				scale > 1 ? (this.Disabled = false) : (this.Disabled = true);
			},
			Scroll(e) {
				// console.log(e,'1');
			},

			containsObjectWithData(objects, key, value) {
				return objects.some((obj) => obj[key] === value);
			},

			Confirm() {
				this.$common.Tel(this.site_config.tel);
			}
		},

		computed: {
			bgImgHeight() {
				if (!this.site_config) return;
				return Math.round(Number(this.site_config.img_h) * 0.72);
				// return Math.round(Number(this.site_config.img_h) * 0.81);
			}
		},
		watch: {
			scaleValue(newVal, oldVal) {
				if (newVal && newVal > 1) {
					this.Disabled = false;
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		background-size: cover;
		background-position: center;
		padding: 50rpx 0 200rpx 0;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background-color: #4a3721;
	}

	.Box {
		width: 690rpx;
		height: 100%;
		margin: 0 auto;
		box-sizing: border-box;
		background-size: 100% 100%;
		background-position: center;
		position: relative;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		// justify-content: space-between;
	}

	.box_Ten {
		width: 540rpx;
		// flex:1;
		margin: 80rpx auto 0;
		overflow: scroll;
		position: relative;
		text-align: center;
	}

	.scrollView {
		width: 540rpx;
		// width: 611rpx;
		height: 80%;
		margin: 80rpx auto 0;
		z-index: 9999;
	}

	.Tanine {
		width: 100%;
	}

	.Tanine_in {
		width: 100%;
		height: 1000rpx;
	}

	.movable-area {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		position: relative;
		z-index: 8988;
	}

	.movable-view {
		width: 100%;
		height: 100%;
	}

	.list {
		position: absolute;
		z-index: 10;
	}

	.list_img {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.boxBgimg {
		width: 750rpx;
		height: 1349rpx;
	}

	// .boxBgimg{
	// 	width:750rpx;
	// 	height:1349rpx;
	// }

	.box_Tip {
		width: 550rpx;
		// height: 20%;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.type_config {
		width: 25%;
		margin-top: 10rpx;
		display: flex;
		justify-content: center;
	}

	.type_config_log {
		width: 28rpx;
		height: 28rpx;
		display: inline-block;
	}

	.type_config_name {
		font-size: 22rpx;
		margin-left: 4rpx;
		display: inline-block;
	}

	.footer {
		width: 690rpx;
		position: fixed;
		bottom: 0;
		left: 30rpx;
		z-index: 1000;
		padding: 30rpx;
		background-color: #ffe6bd;
		border-radius: 20rpx 20rpx 0 0;
		border: 4rpx solid #846144;
		border-bottom: none;
		display: flex;
		flex-direction: column;
	}

	.details {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #000;
	}

	.details_txt {
		font-size: 22rpx;
	}

	.open_time {
		margin: 0 8rpx;
	}

	.Make_btn {
		width: 100%;
		height: 70rpx;
		background-color: #e0bb71;
		color: #000;
		font-size: 26rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 30rpx;
		border-radius: 10rpx;
	}

	.tableList {
		background-color: #eccb95;
		padding: 4rpx 16rpx;
		border-radius: 6rpx;
		margin-right: 10rpx;
		display: inline-block;
	}

	.tableList_name {
		color: #000;
		font-size: 22rpx;
	}

	.Givemoney {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.MoneyBox {
		display: flex;
		flex-direction: column;
	}

	.Earnest {
		color: #db6e5a;
		font-size: 22rpx;
		margin-right: 4rpx;
	}

	.EarnestMoney {
		color: #c41e19;
		font-size: 34rpx;
		font-weight: bold;
	}

	.Copewith {
		color: #333;
		font-size: 22rpx;
		margin-right: 4rpx;
	}

	.CopewithMoney {
		color: #000;
		font-size: 28rpx;
		font-weight: bold;
	}

	.continum {
		width: 260rpx;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		color: #333;
		border-radius: 35rpx;
		background-color: #d7b06d;
		border: 4rpx solid #a17e4f;
	}
</style>